<script setup lang="ts">
import { ref } from 'vue'
import ChefsSelection from './ChefsSelection.vue'
import { useGameStore } from '@/stores/modules/game'
import RecipesSelection from './RecipesSelection.vue'
import { usePlayerStore } from '@/stores/modules/player'

import type { IChefsModel } from './ChefsSelection.vue'
import type { IRecipesModel } from './RecipesSelection.vue'

const chefsSelectionRef = ref<InstanceType<typeof ChefsSelection>>()
const recipesSelectionRef = ref<InstanceType<typeof RecipesSelection>>()

const chefsModel = ref<IChefsModel>({
  chefId: null,
  rarity: [5],
  techniques: [],
})

const recipesModel = ref<IRecipesModel>({
  recipeId1: null,
  recipeId2: null,
  recipeId3: null,
  rarity: [],
  techniques: [],
  material: [],
  condiment: null,
})

function updateChefsModel(data: IChefsModel) {
  chefsModel.value = { ...data }

  console.log(getChefsIds())
}

function getChefsIds() {
  const { freeChefs } = usePlayerStore()
  const { chefId, rarity, techniques } = chefsModel.value

  if (chefId !== null) {
    return [chefId]
  }

  const chefIds = freeChefs
    .filter((chef) => {
      const chefInfo = useGameStore().chefsMap.get(chef.id)
      if (!chefInfo) return false

      const checkRarity = rarity.length === 0 || rarity.includes(chefInfo.rarity)
      const checkTechniques = techniques.every((skill) => chefInfo[skill] > 0)
      return checkRarity && checkTechniques
    })
    .map((chef) => chef.id)
  return chefIds
}

function updateRecipesModel(data: IRecipesModel) {
  recipesModel.value = { ...data }

  console.log(getRecipesIds())
}

function getRecipesIds() {
  const { recipes } = usePlayerStore()
  const { recipeId1, recipeId2, recipeId3, rarity, techniques, material, condiment } =
    recipesModel.value

  const recipeIdsSet = new Set([recipeId1, recipeId2, recipeId3].filter((f) => f !== null))

  if (recipeIdsSet.size === 3) {
    return [...recipeIdsSet]
  }

  recipes
    .filter((recipe) => {
      const recipeInfo = useGameStore().recipesMap.get(recipe.id)
      if (!recipeInfo) return false

      // 检查星级
      const checkRarity = rarity.length === 0 || rarity.includes(recipeInfo.rarity)
      // 检查技法
      const checkTechniques = techniques.every((skill) => recipeInfo[skill] > 0)
      // 检查食材
      const checkMaterial = material.every((materialId) =>
        recipeInfo.materials.map((m) => m.material).includes(materialId),
      )
      // 检查味道
      const checkCondiment = !condiment || recipeInfo.condiment === condiment

      return checkRarity && checkTechniques && checkMaterial && checkCondiment
    })
    .forEach((recipe) => recipeIdsSet.add(recipe.id))

  return [...recipeIdsSet]
}

defineExpose({ getChefsIds, getRecipesIds })
</script>

<template>
  <n-card>
    <n-flex>
      <n-badge :value="getChefsIds().length" show-zero>
        <n-button dashed @click="chefsSelectionRef?.open(chefsModel)">选择厨师</n-button>
      </n-badge>
      <n-badge :value="getRecipesIds().length" show-zero>
        <n-button dashed @click="recipesSelectionRef?.open(recipesModel)">选择菜谱</n-button>
      </n-badge>
    </n-flex>
  </n-card>
  <ChefsSelection ref="chefsSelectionRef" @updateChefsModel="updateChefsModel" />
  <RecipesSelection ref="recipesSelectionRef" @updateRecipesModel="updateRecipesModel" />
</template>

<style lang="scss" scoped></style>
